{extend name="base"}
{block name="title"}后台角色权限{/block}
{block name="head"}
<style>
.RoleAction{
  width:1200px;
  font-family:simsun;
  font-weight:400;
  color:#535353;
}
.RoleAction, .RoleAction th, .RoleAction td{
  border:solid 1px #eee;
  border-collapse:collapse;
  vertical-align:top;
}
.RoleAction th{
  font-weight:400;
  font-size:16px;
  height:30px;
  line-height:30px;
}
.RoleAction td {
  font-size:14px;
}
.RoleAction dt {
  color:#0C0C0C;
  font-size: 20px;
  background:#f7f7f7;
}
.RoleAction dl.tab, .RoleAction dd {
  margin-left:20px;
}
.RoleAction dt, .RoleAction dd {
  border-bottom:solid 2px #eee;
  position:relative;
  text-align: left;
  height:22px;
  line-height:22px;
}
.RoleAction i{
  color:#008040;
  font-style:normal;
  float:right;
  position:absolute;
  right:20px;
}
.RoleAction input[type="checkbox"]{
  position:absolute;
  right:5px;
  top:5px;
}
</style>
{/block}
{block name="body"}
<body class="mainbody">
<form>
<!--导航栏-->
<div class="location">
  <a href="javascript:history.back(-1);" class="back"><i class="iconfont icon-up"></i><span>返回上一页</span></a>
  <a href="{:url('index/home')}" class="home"><i class="iconfont icon-home"></i><span>首页</span></a>
  <i class="arrow iconfont icon-arrow-right"></i>
  <span>后台角色权限</span>
</div>
<!--/导航栏-->

<!--工具栏-->
<div id="floatHead" class="toolbar-wrap">
  <div class="toolbar">
    <div class="box-wrap">
      <a class="menu-btn"><i class="iconfont icon-more"></i></a>
      <div class="l-list">
        <div class="menu-list">
          <div class="rule-single-select">
            <select name="RoleID" style="display:none">
              {volist name="ADMIN_ROLES" id="val"}
              <option value="{$key}"{eq name="RoleID" value="$key"} selected{/eq}>[{$key}]{$val}</option>
              {/volist}
            </select>
          </div>
          <input type="button" value="保存设置" id="save" />
        </div>
      </div>
    </div>
  </div>
</div>
<!--/工具栏-->

<div class="table-container">
  <table class="RoleAction">
    <tr>
      <th>菜单Action</th>
      <th>其他Action</th>
    </tr>
    <tr>
      <td width="40%">
        {volist name="menu" id="a"}
        <dl>
          <dt>[{:str_pad($a.NavId, 4, '0', STR_PAD_LEFT)}]{$a.NavTitle}<input type="checkbox" /></dt>
          {volist name="a._child" id="b"}
          <dl class="tab">
            <dt>[{:str_pad($b.NavId, 4, '0', STR_PAD_LEFT)}]{$b.NavTitle}<input type="checkbox" /></dt>
            {volist name="b._child" id="c"}
            <dd>[{:str_pad($c.NavId, 4, '0', STR_PAD_LEFT)}]{$c.NavTitle}<input type="checkbox" data-nid="{$c.NavId}"{gt name="c.State" value="0"} checked{/gt} /></dd>
            {/volist}
          </dl>
          {/volist}
        </dl>
        {/volist}
      </td>
      <td width="60%">
        <dl>
          <dt>[ALL]<input type="checkbox" /></dt>
          {volist name="list" id="a"}
          <dl class="tab">
            <dt>[{$key}]<input type="checkbox" /></dt>
            {volist name="a" id="b"}
            <dd>[{:str_pad($b.NavId, 4, '0', STR_PAD_LEFT)}]{$b.LinkUrl}<i>{$b.Remark}</i><input type="checkbox" data-nid="{$b.NavId}"{gt name="b.State" value="0"} checked{/gt} /></dd>
            {/volist}
          </dl>
          {/volist}
        </dl>
      </td>
    </tr>
  </table>
</div>

<!--内容底部-->
<div class="page-footer"><div class="btn-wrap">{/*$list->render()*/}</div></div>
<!--/内容底部-->

</form>
<script>
$(function () {
  $('.RoleAction dd').mouseenter(function () {
    $(this).css('background', '#f7f7f7');
  }).mouseleave(function () {
    $(this).css('background', '#fff');
  });
  $('.RoleAction dt input[type=checkbox]').change(function(){ // 勾选父节点
    console.log("dt.checkbox");
    var aaa = $(this);
    var bbb = aaa.parent();
    var ccc = bbb.siblings();
    var ddd = ccc.find(':checkbox');
    var eee = aaa.prop('checked');
    ddd.prop('checked', eee);
  });
  $('#save').click(function () { // 保存勾选
    var chks = $('.RoleAction dd input[type=checkbox]'); // 全部Action
    var vals = [];
    $.each(chks, function (k, v) {
      var a = $(v);
      var b = a.data('nid');
      var c = a.prop('checked');
      vals.push(b + ':' + (c ? 1 : 0));
    });
    vals = vals.join(';');
    
    console.log(vals);
    
    dialog({
      title: '提示',
      content: '确定保存勾选?RoleID={$RoleID}',
      okValue: '确认',
      ok: function () {
        $.post("{:url('save')}", {RoleID: "{$RoleID}", Action: vals}, function (resp, state, xhr) {
          console.log(resp);
          alert(resp.error);
          if (resp.errno == 0) {
            location.reload();
          }
        });
        return false;
      }
    }).showModal();
    
  });
});
</script>
</body>
{/block}